import React, { useState, useRef } from 'react'
import './workstab.css'

// 编辑
import Edit from '../Tabicon/edit'
// 活动管理
import Activity from '../Tabicon/activity'
// 推广
import Promotion from '../Tabicon/promotion'
// 下载
import Download from '../Tabicon/download'
// 数据
import Dataer from '../Tabicon/dataer'

// 没有数据页面
import Blankpage from '../Tabicon/blankpage'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';

const workstab: React.FC = () => {
    const [index, setindex] = useState('全部')
    const [istabshow, setistabshow] = useState(false);
    const [istwoshow, setistwoshow] = useState(false);
    const [isthreeshow, setisthreeshow] = useState(false);
    const [isfourshow, setisfourshow] = useState(false);
    const [isfiveshow, setisfiveshow] = useState(false);


    // 创建一个引用来获取容器元素
    const containerRef = useRef<HTMLDivElement>(null)
    // 定义滑动到右侧的函数
    const scorllRight = () => {
        console.log(222);
        if (containerRef.current) {           //每次滚动距离   平滑滚动
            containerRef.current.scrollBy({ left: 800, behavior: 'smooth' })
        }
    }

    // 定义滑动到左侧的函数
    const scorllLeft = () => {
        console.log(111);

        if (containerRef.current) {
            containerRef.current.scrollBy({ left: -800, behavior: 'smooth' })
        }
    }


    //  移入移出事件
    const ontabMouse = () => {
        setistabshow(true);
    }
    const offtabMouseLeave = () => {
        setistabshow(false)
    }

    const ontwoMouse = () => {
        setistwoshow(true);
    }
    const offtwoMouseLeave = () => {
        setistwoshow(false)
    }


    const onthreeMouse = () => {
        setisthreeshow(true);
    }
    const offthreeMouseLeave = () => {
        setisthreeshow(false)
    }


    const onfourMouse = () => {
        setisfourshow(true);
    }
    const offfourMouseLeave = () => {
        setisfourshow(false)
    }

    const onfiveMouse = () => {
        setisfiveshow(true);
    }
    const offfiveMouseLeave = () => {
        setisfiveshow(false)
    }


    const rednerlist = () => {

        switch (index) {
            case '全部':
                return <div className='alls' >

                    <div className='tabsone' onMouseEnter={ontabMouse} onMouseLeave={offtabMouseLeave}>
                        <img src="../../src/assets/img/shuyang.jpg" alt="" />
                        {istabshow ?
                            <div className='tabicon'>
                                <Edit />  <Activity />  <Promotion />
                            </div> : <div>
                                <p style={{ background: '#fef6eb', color: '#f8b940', width: '34px', textAlign: 'center' }}>互动</p>
                                <p className='ptwo'>易企秀活动</p>
                                <p className='pdays'>2024-09-21</p>
                            </div>
                        }

                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客<span>0</span>表单</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>

                    </div>

                    <div className='tabsone' onMouseEnter={ontwoMouse} onMouseLeave={offtwoMouseLeave}>
                        <img src="./../src/assets/img/zaoan.png" alt="" />
                        {
                            istwoshow ? <div className='tabicon'>
                                <Edit /><Download />
                            </div> : <div>
                                <p style={{ background: '#f0effd', color: '#7262ec', width: '34px', textAlign: 'center' }}>海报</p>
                                <p className='ptwo'>心情日签早安拼图正能量</p>
                                <p className='pdays'>2024-09-21</p>

                            </div>
                        }

                        <p className='pthree'>（1125*2436像素）</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>


                    </div>


                    <div className='tabsone' onMouseEnter={onthreeMouse} onMouseLeave={offthreeMouseLeave}>
                        <img src="../../src/assets/img/2024.png" alt="" />
                        {
                            isthreeshow ? <div className='tabicon'>
                                <Edit />
                            </div> :
                                <div>
                                    <p style={{ background: '#ecf5f0', color: '#3fa16e', width: '34px', textAlign: 'center' }}>视频</p>
                                    <p className='ptwo'>数字人口播企业宣传公司介绍</p>
                                    <p className='pdays'>2024-09-21</p>
                                </div>
                        }

                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客</p>

                    </div>

                    <div className='tabsone' onMouseEnter={onfourMouse} onMouseLeave={offfourMouseLeave}>
                        <img src="../../src/assets/img/twoend.png" alt="" />
                        {
                            isfourshow ? <div className='tabicon'>
                                <Edit /><Dataer /><Promotion />
                            </div> :
                                <div>
                                    <p style={{ background: '#ecf6f9', color: '#2cb2c3', width: '34px', textAlign: 'center' }}>表单</p>
                                    <p className='ptwo'>平安出生征文活动投票评选</p>
                                    <p className='pdays'>2024-09-21</p>
                                </div>
                        }
                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客<span>0</span>表单</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>
                    </div>

                    <div className='tabsone' onMouseEnter={onfiveMouse} onMouseLeave={offfiveMouseLeave}>
                        <img src="../../src/assets/img/yaoqinghan.png" alt="" />
                        {
                            isfiveshow ? <div className='tabicon'>
                                <Edit /><Dataer /><Promotion />
                            </div> :
                                <div>
                                    <p style={{ background: '#e7efff', color: '#1b6bff', width: '34px', textAlign: 'center' }}>H5</p>
                                    <p className='ptwo'>紫色轻奢唯美时尚品牌商务...</p>
                                    <p className='pdays'>2024-09-21</p>
                                </div>
                        }
                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客<span>0</span>表单</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>

                    </div>



                    <div className='tabsone' onMouseEnter={ontabMouse} onMouseLeave={offtabMouseLeave}>
                        <img src="../../src/assets/img/shuyang.jpg" alt="" />
                        {istabshow ?
                            <div className='tabicon'>
                                <Edit />  <Activity />  <Promotion />
                            </div> : <div>
                                <p style={{ background: '#fef6eb', color: '#f8b940', width: '34px', textAlign: 'center' }}>互动</p>
                                <p className='ptwo'>易企秀活动</p>
                                <p className='pdays'>2024-09-21</p>
                            </div>
                        }

                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客<span>0</span>表单</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>

                    </div>

                </div>


            case 'H5':
                return <div className='alltwo'>
                    <div className='tabsone' onMouseEnter={ontabMouse} onMouseLeave={offtabMouseLeave}>
                        <img src="../../src/assets/img/shuyang.jpg" alt="" />
                        {istabshow ?
                            <div className='tabicon'>
                                <Edit />  <Activity />  <Promotion />
                            </div> : <div>
                                <p style={{ background: '#fef6eb', color: '#f8b940', width: '34px', textAlign: 'center' }}>互动</p>
                                <p className='ptwo'>易企秀活动</p>
                                <p className='pdays'>2024-09-21</p>
                            </div>
                        }

                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客<span>0</span>表单</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>

                    </div>


                </div>
            case '海报':
                return <div className='alltwo'>
                    <div className='tabsone' onMouseEnter={ontwoMouse} onMouseLeave={offtwoMouseLeave}>
                        <img src="./../src/assets/img/zaoan.png" alt="" />
                        {
                            istwoshow ? <div className='tabicon'>
                                <Edit /><Download />
                            </div> : <div>
                                <p style={{ background: '#f0effd', color: '#7262ec', width: '34px', textAlign: 'center' }}>海报</p>
                                <p className='ptwo'>心情日签早安拼图正能量</p>
                                <p className='pdays'>2024-09-21</p>

                            </div>
                        }

                        <p className='pthree'>（1125*2436像素）</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>


                    </div>
                </div>
            case '长页':
                return <div className='whites'>
                    <Blankpage />
                </div>
            case '表单':
                return <div className='alltwo'>
                    <div className='tabsone' onMouseEnter={onfourMouse} onMouseLeave={offfourMouseLeave}>
                        <img src="../../src/assets/img/twoend.png" alt="" />
                        {
                            isfourshow ? <div className='tabicon'>
                                <Edit /><Dataer /><Promotion />
                            </div> :
                                <div>
                                    <p style={{ background: '#ecf6f9', color: '#2cb2c3', width: '34px', textAlign: 'center' }}>表单</p>
                                    <p className='ptwo'>平安出生征文活动投票评选</p>
                                    <p className='pdays'>2024-09-21</p>
                                </div>
                        }
                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客<span>0</span>表单</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>
                    </div>
                </div>
            case '互动':
                return <div className='alltwo'>
                    <div className='tabsone' onMouseEnter={ontabMouse} onMouseLeave={offtabMouseLeave}>
                        <img src="../../src/assets/img/shuyang.jpg" alt="" />
                        {istabshow ?
                            <div className='tabicon'>
                                <Edit />  <Activity />  <Promotion />
                            </div> : <div>
                                <p style={{ background: '#fef6eb', color: '#f8b940', width: '34px', textAlign: 'center' }}>互动</p>
                                <p className='ptwo'>易企秀活动</p>
                                <p className='pdays'>2024-09-21</p>
                            </div>
                        }

                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客<span>0</span>表单</p>
                        <div className='transparent'>
                            <div className='drop'>···</div>
                            <div className='preview'>预览</div>
                        </div>

                    </div>
                </div>
            case '电子画册':
                return <div className='whites'>
                    <Blankpage />
                </div>
            case '视频':
                return <div className='alltwo'>
                    <div className='tabsone' onMouseEnter={onthreeMouse} onMouseLeave={offthreeMouseLeave}>
                        <img src="../../src/assets/img/2024.png" alt="" />
                        {
                            isthreeshow ? <div className='tabicon'>
                                <Edit />
                            </div> :
                                <div>
                                    <p style={{ background: '#ecf5f0', color: '#3fa16e', width: '34px', textAlign: 'center' }}>视频</p>
                                    <p className='ptwo'>数字人口播企业宣传公司介绍</p>
                                    <p className='pdays'>2024-09-21</p>
                                </div>
                        }

                        <p className='pthree'><span>0</span>浏览 <span>0</span>访客</p>

                    </div>
                </div>
            default:
                return null
        }
    }





    return (
        <div className='workstabbox'>
            <div className='workstabbox_tabtitle'>
                <ul>
                    <li onClick={() => setindex('全部')} className={index === '全部' ? 'highlight' : ''}>全部</li>
                    <li onClick={() => setindex('H5')} className={index === 'H5' ? 'highlight' : ''}>H5</li>
                    <li onClick={() => setindex('海报')} className={index === '海报' ? 'highlight' : ''}>海报</li>
                    <li onClick={() => setindex('长页')} className={index === '长页' ? 'highlight' : ''}>长页</li>
                    <li onClick={() => setindex('表单')} className={index === '表单' ? 'highlight' : ''}>表单</li>
                    <li onClick={() => setindex('互动')} className={index === '互动' ? 'highlight' : ''}>互动</li>
                    <li onClick={() => setindex('电子画册')} className={index === '电子画册' ? 'highlight' : ''}>电子画册</li>
                    <li onClick={() => setindex('视频')} className={index === '视频' ? 'highlight' : ''}>视频</li>
                </ul>
            </div>
            {/* 内容展示部分 */}
            <div className='workstabbox_content' ref={containerRef}>
                {/* 左箭头 */}
                <button onClick={scorllLeft} className='ltbtn'><LeftOutlined /></button>
                {/* 右箭头 */}
                <button onClick={scorllRight} className='rtbtn'><RightOutlined /></button>

                {/* 内容 */}
                {rednerlist()}
            </div>
        </div>
    )
}

export default workstab
